<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header" :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
      <image @click="gomine" src="../../static/images/homeview.png" mode="aspectFill" style="width: 84rpx; height: 84rpx; margin-right: 194rpx"></image>
      <view>虎云代驾</view>
      <view></view>
    </view>
    <!--头部图片 -->
    <swiper class="swiper" circular :autoplay="true" :interval="2000" style="width: 100%; height: 216rpx" :style="{ 'padding-top': navheight + 5 + 'px' }">
      <swiper-item>
        <image src="../../static/images/indexbgc.png" mode="aspectFill" style="width: 100%; height: 100%; display: block"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../static/images/logo.png" mode="aspectFill" style="width: 100%; height: 100%; display: block"></image>
      </swiper-item>
    </swiper>
    <!-- <image src="../../static/images/indexbgc.png" mode="aspectFill" style="width: 100%; height: 216rpx; display: block" :style="{ 'padding-top': navheight + 5 + 'px' }"></image> -->
    <!-- 地图 -->
    <map style="width: 100%; height: 528rpx" :markers="covers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-view class="content">{{ item.id }} 内容</cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
    <image src="../../static/images/indexposition.png" mode="aspectFill" style="width: 64rpx; height: 64rpx; position: fixed; right: 10rpx; top: 750rpx"></image>
    <!-- 选择地点 -->
    <view class="address" id="choose" :style="{ height: addresshieght + 'px' }">
      <view class="son">
        <view class="sontab">
          <view class="sontableft">
            <image src="../../static/images/indextab.png" mode="aspectFill" style="width: 61%; height: 110rpx"></image>
            <view style="position: absolute; top: 33%; left: 15%; font-weight: bold; font-size: 30rpx; color: #3483f6">呼叫代驾</view>
          </view>
          <view style="position: absolute; top: 33%; right: 20%; font-size: 30rpx; color: #2e3148">扫司机</view>
        </view>
        <view class="sonbox">
          <!-- 起点 -->
          <view style="display: flex; align-items: center; width: 592rpx; height: 104rpx; padding-left: 20rpx" @click="gostartaddress">
            <view style="width: 16rpx; height: 16rpx; background: #32b499; border-radius: 50%; margin-right: 24rpx"></view>
            <view style="width: 500rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden">
              从
              <text style="color: #32b499; padding: 0 10rpx">{{ startaddress }}</text>
              出发
            </view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
          <!-- 终点 -->
          <view
            @click="goendaddress"
            style="
              display: flex;
              align-items: center;
              margin-top: 20rpx;
              width: 592rpx;
              height: 104rpx;
              background: #f3f3f3;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              padding-left: 20rpx;
            "
          >
            <view style="width: 16rpx; height: 16rpx; background: #f30021; border-radius: 50%; margin-right: 24rpx"></view>
            <view style="width: 500rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden">
              <text v-if="endaddress" style="color: #32b499; padding: 0 10rpx">{{ endaddress }}</text>
              <text v-else>输入您的目的地</text>
            </view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
          <!-- 替朋友代驾 -->
          <view @click="gotofirends" style="display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 30rpx; color: #222222; margin-top: 72rpx">
            <view>替朋友叫代驾</view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="address" id="choose"></view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navheight: 0, // 导航栏高度
      hometop: 0, // 顶部的距离
      addresshieght: 0, // 地址选择的盒子
      startaddress: '', // 起点
      endaddress: '', // 终点
      // 地图的数据
      latitude: 39.909,
      longitude: 116.39742,
      covers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '80rpx',
          height: '80rpx'
        },
        {
          id: 2,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/end.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '80rpx',
          height: '80rpx'
        }
      ]
    };
  },
  methods: {
    // 跳转到个人中心
    gomine() {
      uni.navigateTo({
        url: '/mine/mine/mine'
      });
    },
    // 跳转到起点
    gostartaddress() {
      uni.navigateTo({
        url: '/pages/startaddress/startaddress'
      });
    },
    // 跳转到终点
    goendaddress() {
      uni.navigateTo({
        url: '/pages/endaddress/endaddress'
      });
    },
    // 跳转到朋友代驾
    gotofirends() {
      uni.navigateTo({
        url: '/pages/changeprople/changeprople'
      });
    }
  },
  onLoad() {
    // 获取用户当前位置
    uni.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,
      accuracy: 'best',
      success: (res) => {
        // console.log('当前位置的经度：' + res.longitude);
        // console.log('当前位置的纬度：' + res.latitude);
        this.latitude = res.latitude;
        this.longitude = res.longitude;
        this.covers.latitude = res.latitude;
        this.covers.longitude = res.longitude;
      }
    });
    // 导航栏的高度
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  onShow() {
    if (uni.getStorageSync('startaddress')) {
      this.startaddress = uni.getStorageSync('startaddress').title;
      this.covers[0].title = uni.getStorageSync('startaddress').title;
    }
    if (uni.getStorageSync('endaddress')) {
      this.endaddress = uni.getStorageSync('endaddress').title;
      this.covers[1].title = uni.getStorageSync('startaddress').title;
    }
    // 获取剩余的高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#choose')
          .boundingClientRect((data) => {
            this.addresshieght = e.screenHeight - data.top - this.navheight;
            console.log('节点离页面顶部的距离为' + this.addresshieght);
          })
          .exec();
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.customCallout {
  box-sizing: border-box;
  background-color: #fff;
  background: #ffffff;
  box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
  border-radius: 4rpx;
  display: inline-flex;
  padding: 6rpx 24rpx;
  justify-content: center;
  align-items: center;
  color: #2a7be2;
}

.container {
  box-sizing: border-box;
  .header {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    align-items: center;
    padding-left: 26rpx;
    background-color: #fff;
    // justify-content: space-between;
  }
  .address {
    box-sizing: border-box;
    width: 100%;
    // height: 704rpx;
    background: linear-gradient(180deg, #3376f7, 40%, #ededed);
    padding: 52rpx 28rpx 0 28rpx;
    border-radius: 30rpx 30rpx 0 0;
    .son {
      width: 694rpx;
      height: 572rpx;
      border-radius: 40rpx;
      overflow: hidden;
      .sontab {
        position: relative;
        top: 0;
        left: 0;
        // display: flex;
        // align-items: center;
        width: 100%;
        height: 110rpx;
        background-color: #e7e9f6;
        .sontableft {
          position: relative;
          top: 0;
          left: 0;
        }
      }
      .sonbox {
        box-sizing: border-box;
        width: 100%;
        height: 462rpx;
        background-color: #fff;
        padding: 60rpx 52rpx;
      }
    }
  }
}
</style>
